<template>
  <div class="down">
    <div class="down_text">
      <div class="top_xiazai">
        <div class="nth_one">
          <img :src="require('@/assets/images/down_new/LOGO.png')" alt="" srcset="" />
        </div>
        <div class="nth_two">
          <div @click="downClick">立即下载</div>
        </div>
      </div>
      <div class="room_list"> 
           <div class="box_nth">
             <img :src="data.headPic" alt="" srcset="">
             <span class="room_new">{{data.nickname}}</span>
             <span class="room_id">房间ID：{{data.perfectNumber}}</span>
           </div>
           <img :src="require('@/assets/images/down_new/HAOSHENGYIN.png')" alt="">
           <div class="bottom_boxxiazai" @click="downClick">
                点击进入房间
           </div>
      </div>
      <div class="down_other" v-show="data.downShow" @click="down_otherClick">
        <img :src="require('@/assets/images/down/dian.png')" class="down_other_dian" />
        <img :src="require('@/assets/images/down/tips1.png')" class="down_other_shou" />
        <p>请在浏览器中打开下载</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { chatBaseInfo } from '@/api/user'
interface Data {
    downShow: boolean,
    downimg: boolean,
    perfectNumber: string,
    headPic: string,
    nickname: string,
    roomId: string,
}
export default defineComponent({
  setup () {
    const route: any = useRoute()
    const data = reactive<Data>({
        downShow: false,
        downimg: true,
        perfectNumber: "",
        headPic: "",
        nickname: "",
        roomId: '',
    })
    if ((window as any).isAndroid) {
      data.downimg = true
    } else {
      data.downimg = false
    }
    data.roomId = route.query.room_id
    const getData: () => void = async () => {
        const resData = await chatBaseInfo({
            roomId: data.roomId
        })
        if (resData.data.status === 0) {
            const { headPic, nickname, perfectNumber } = resData.data.result
            data.headPic = headPic
            data.nickname = nickname
            data.perfectNumber = perfectNumber
        }
    }
    const down_otherClick: () => void = () => {
      data.downShow = false
    }
    const downClick: () => void = () => {
      let u = navigator.userAgent
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      var ua = (window as any).navigator.userAgent.toLowerCase()
      let isvx = ua.match(/MicroMessenger/i) == "micromessenger"
      if (isvx) {
        data.downShow = true
      } else {
        if (isiOS) {
          window.location.href = "https://apps.apple.com/cn/app/id1535743948"
        } else {
          window.location.href =
            "https://img.xunyinjiaoyou.com/static/app/xunyin2.apk"
        }
      }
    }
    getData()
    return {
        downClick,
        down_otherClick,
        data
    }
  }
})
</script>

<style lang="less" scoped>
@import './DownNew.less';
</style>